

<template>
    <div ref="uiEchart" style="width: 100%; height: 100%" id="uiEchart" @mouseover="handleMouseOver"
      @mouseout="handleMouseOut"></div>
</template>

<script setup>
    import { ref, reactive, toRefs, computed, onMounted, watch } from 'vue'
    import * as echarts from "echarts";
    import { controlStore } from '@/stores/control'

    const emitter = defineEmits(['clk']);
    const props = defineProps({
        config: {
            type: Object,
            default: () => {
                return {}
            }
        },
        vt: {
            type: [Number, String],
            default: 1
        },
    });
    const { config, vt } = toRefs(props);

    const controlSto = controlStore();

    let uiEchart = ref(null);
    let chartDom = null;

    onMounted(()=> {
        initEchart();
    });
    const initEchart = () => {
        // 基于准备好的dom，初始化echarts实例
        chartDom = echarts.init(uiEchart.value, config);
        chartDom.setOption(config.value);
        chartDom.off('click'); //防止被重复触发点击事件
        chartDom.on('click', (params) => {
            emitter('clk', params);
            // 此处一般写：click事件触发后的回调，来完成额外的功能

        });
        // console.log('initEchart', config)
        chartDom.on('saveAsImage', (event) => {
            console.log(event)
        })
        chartDom.on('mouseover',(e)=>{ 
            if(e.componentType === "xAxis"){
                // 我们这里先判断一个创建的dom节点是否存在
                let tipNameDom = document.getElementById('tipNameDom')
                // 如果不存在我们创建一个dom节点
                if(!tipNameDom){
                // 创建一个元素
                var createDivElement = document.createElement('div')
                // 给这个元素设置属性
                createDivElement.setAttribute('id', 'tipNameDom')
                // // 设置元素的位置
                createDivElement.style.display = 'block'
                createDivElement.style.position = 'absolute'
                // 获取当前位置
                createDivElement.style.top =  e.event.offsetY + 15 + 'px'
                createDivElement.style.left = e.event.offsetX - 10 + 'px'
                createDivElement.style.zIndex = 9999;
                // 这里需要使用 innerHTML，因为我们设置了一样html的属性
                createDivElement.innerHTML = e.value
                // document.querySelector('body').appendChild(createDivElement)
                document.querySelector('#barChart').appendChild(createDivElement)
                }else {
                tipNameDom.style.display = 'block'
                tipNameDom.style.position = 'absolute'
                // 获取当前位置
                tipNameDom.style.top =  200 + 'px'
                tipNameDom.style.left = e.event.offsetX + 'px'
                tipNameDom.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
                tipNameDom.style.color = '#fff'
                tipNameDom.style.padding = '8px';
                tipNameDom.style.minWidth = '200px'
                tipNameDom.style.textAlign = 'center'
                tipNameDom.style.zIndex = 9999;

                // 这里需要使用 innerHTML，因为我们设置了一样html的属性
                tipNameDom.innerHTML = e.value
                }
            }
        })
        chartDom.on('mouseout', function(params) {
        if (params.componentType === 'xAxis') {
            let elementDiv = document.querySelector('#tipNameDom')
            elementDiv.style.display = 'none'
        }  
        })
    }
const handleMouseOver = (param) => {
    config.value.toolbox.show = true;
    chartDom = echarts.init(uiEchart.value, config);
    chartDom.setOption(config.value);
}
const handleMouseOut = () => {
    config.value.toolbox.show = false;
    chartDom = echarts.init(uiEchart.value, config);
    chartDom.setOption(config.value);
}
    watch(() => vt.value, (nv, ov) => {
		if(nv != ov) {
            chartDom.setOption(config.value);
		}
	});
    watch(() => controlSto.clientWidth.value, (nv, ov) => {
		if(nv != ov) {
            chartDom.setOption(config.value);
		}
	});
    defineExpose({
        initEchart 
    })

</script>


<style lang="scss">
   
</style>
